<template>
  <el-container>
    <el-main>
      <!-- 表格  -->
      <vxe-grid
        ref="mainTable"
        column-key
        context-menu
        v-grid-drag-col
        :height="$store.getters.scrollerHeight()"
        :toolbar="tableToolbar"
        :columns="tableColumn"
        :proxy-config="tableProxy"
        tree-config
        pager-config
        :sort-config="{remote:true, defaultSort: { field: 'B_SortCode', order: 'asc' }}"
      >
        <!-- 多条件查询 -->
        <template v-slot:toolbar_search>
          <rayd-multi-query
            v-model="queryEntity"
            @query="$refs[`mainTable`].commitProxy(`reload`)"
          >
            <vxe-form-item title="模块编码">
              <el-input v-model="queryEntity.B_EnCode"></el-input>
            </vxe-form-item>
            <vxe-form-item title="模块名称">
              <el-input v-model="queryEntity.B_FullName"></el-input>
            </vxe-form-item>
            <vxe-form-item title="创建日期">
              <rayd-date-picker
                type="datetimerange"
                v-model="queryEntity.B_CreateDate"
              ></rayd-date-picker>
            </vxe-form-item>
          </rayd-multi-query>
        </template>
        <!-- 业务按钮 -->
        <template v-slot:toolbar_buttons>
          <el-button round type="primary" icon="el-icon-plus" @click="handleAdd" v-permission-btn="'Add'">新增</el-button>
          <el-button round type="warning" icon="el-icon-edit" @click="handleEdit" v-permission-btn="'Edit'">编辑</el-button>
          <el-button round type="danger" icon="el-icon-delete" @click="handleDelete" v-permission-btn="'Delete'">删除</el-button>
          <el-button round type="success" icon="el-icon-document-copy" @click="handleCopy" v-permission-btn="'Copy'">复制</el-button>
          <el-divider direction="vertical"></el-divider>
        </template>
        <!-- 模块状态模板 -->
        <template v-slot:B_EnabledMark="{ row }">
          <vxe-switch v-model="row.B_EnabledMark" on-label="启用" :on-value="1" off-label="禁用" :off-value="0" @change="ChangeState(row)"></vxe-switch>
        </template>
      </vxe-grid>
    </el-main>
    <!-- 拟态窗口 -->
    <Form ref="mainForm" @refresh="$refs[`mainTable`].commitProxy(`reload`)" />
  </el-container>
</template>

<script>
import { Module } from "@/api";
import Form from "./Form.vue";
export default {
  components: {  Form },
  data() {
    return {
      /* vxe-grid */
      queryEntity: {}, //查询实体
      //工具栏配置
      tableToolbar: {
        refresh: true,
        zoom: true,
        custom: true,
        
      },
      //列配置
      tableColumn: [
        {
          field: "B_FullName",
          title: "模块名称",
          width: 200,
          align: "left",
          sortable: true,
          treeNode: true,
        },
        {
          field: "B_EnCode",
          title: "模块编码",
          width: 250,
          align: "left",
          sortable: true,
        },
        {
          field: "B_UrlAddress",
          title: "路由地址",
          align: "left",
          sortable: true,
        },
        {
          field: "B_EnabledMark",
          title: "模块状态",
          sortable: true,
          width: 100,
          slots: { default: "B_EnabledMark" },
        },
        {
          field: "B_CreateDate",
          title: "创建日期",
          sortable: true,
          width: 150,
          formatter: ["toDateString", "yyyy-MM-dd"],
        },
      ],
      //数据代理配置
      tableProxy: {
        seq: true, // 启用动态序号代理
        sort: true, // 启用排序代理
        autoLoad: true, //是否自动加载查询数据
        ajax: {
          // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）
          query: ({ page, sort, filters }) => {
            page.sidx = sort.property;
            page.sord = sort.order;
            return Module.GetPageList({
              queryjson: JSON.stringify(this.queryEntity),
              pagination: JSON.stringify(page),
            }).then((res) => {
              return res;
            });
          },
        },
      },
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
    },
    //状态变更
    ChangeState(row) {
      Module.ChangeState({
        B_ModuleId: row.B_ModuleId,
        B_EnabledMark: row.B_EnabledMark,
      }).catch((err) => {
        //状态归位
        row.B_EnabledMark = !row.B_EnabledMark;
      });
    },
    //新增
    handleAdd() {
      this.$refs["mainForm"].formOpen();
    },
    //编辑
    handleEdit() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$refs["mainForm"].formOpen(row);
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
    //删除
    handleDelete() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$confirm("确认永久删除该行数据?", "提示", { type: "warning" })
          .then(() => {
            Module.Delete(row).then((res) => {
              this.$refs["mainTable"].commitProxy("reload"); // 刷新表格
            });
          })
          .catch((e) => {});
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
    //复制
    handleCopy() {
      let row = this.$refs["mainTable"].getCurrentRecord();
      if (row) {
        this.$refs["mainForm"].formOpen(row, true);
      }else{
        this.$message.warning("请选择数据行！");
      }
    },
  },

};
</script>

<style lang="less" scoped>
</style>